<template>
    <div class="device">
        <ul class="device_ul">
            <li class="device_li">
                <p class="device_li_p">序号</p>
                <p class="device_li_p">部门</p>
                <p class="device_li_p">接班人</p>
                <p class="device_li_p">接班时间</p>
            </li>
            <div class="device_b">
                <vue-seamless-scroll class="scroll_box" :data="data" :class-option="defineScroll" style="
                height: 100%;
                overflow: hidden;
                width: 100%;
                color: white;
                font-size: 18px;
                text-align: center;
                ">

                    <li class="device_lis" v-for="(item, index) in data">
                        <p class="device_lis_p">{{ index + 1 }}</p>
                        <p class="device_lis_p">{{ item.deptName }}</p>
                        <p class="device_lis_p">{{ item.nickName.toString() }}</p>
                        <p class="device_lis_p">{{ item.time }}</p>
                    </li>

                </vue-seamless-scroll>

            </div>
        </ul>
    </div>
</template>
<script>
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    computed: {
        defineScroll() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleHeight: 0,
                // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                singleWidth: 0,
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    mounted() {
        // this.area()
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.device_ul {
    padding: 0;
    margin: 0;

    li {
        list-style: none;
    }
}

.device_b {
    height: 175px;
    background: url("@/assets/ThreeD/leftcentern.png");

}

.device_lis {
    display: flex;
    height: 35px;
    align-items: center;
    .device_lis_p {
        padding: 0;
        margin: 0;
        text-align: center;
        // line-height: 35px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;

        &:nth-child(1) {
            width: 12%;
        }

        &:nth-child(2) {
            width: 43%;
        }

        &:nth-child(3) {
            width: 18%;
        }

        &:nth-child(4) {
            width: 27%;
        }
    }
}

.device_li {
    background: url("@/assets/ThreeD/leftct.png");
    height: 35px;
    display: flex;

    .device_li_p {
        padding: 0;
        margin: 0;
        text-align: center;
        line-height: 35px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;

        &:nth-child(1) {
            width: 12%;
        }

        &:nth-child(2) {
            width: 43%;
        }

        &:nth-child(3) {
            width: 18%;
        }

        &:nth-child(4) {
            width: 27%;
        }
    }
}
</style>